<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="800"
             destroyOnClose
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="角色名称" name="name">
                        <a-input v-model:value="formState.name" style="width: 200px" placeholder="请输入角色名称" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="角色备注" name="name">
                        <a-input v-model:value="formState.remark" style="width: 200px" placeholder="请输入角色备注" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="上级分类" name="id">
                        <a-tree
                            checkable
                            v-model:value="formState.id"
                            style="width: 100%"
                            v-model:expandedKeys="expandedKeys"
                            v-model:selectedKeys="selectedKeys"
                            v-model:checkedKeys="checkedKeys"
                            :tree-data="treeData"
                            :replaceFields="{children: 'childrenMenus', title: 'name', key: 'id', value: 'id'}"
                            placeholder="请选择"
                            defaultExpandAll
                        >
                        </a-tree>
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed, watch} from "vue";
export default defineComponent({
    name: "commonModal",
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "新增角色"
        },
        typeName: {
            type: String
        }
    },
    setup(props, context) {
        const formData = ref()
        const formState = computed(() => props.data)
        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const typeName = computed(() => props.typeName)
        const state = reactive({
            treeData: JSON.parse(window.localStorage.getItem('meuns')),
            expandedKeys: undefined,
            selectedKeys: undefined,
            checkedKeys: formState.value.list
        })

        watch(show, () => {
            console.log(78787878)
            state.checkedKeys = formState.value.list
        })

        // 点击确定按钮
        const handleOk = () => {
            console.log(999999999, formState.value.list)
            const params = {
                type: typeName.value,
                checkedKeys: state.checkedKeys
            }
            state.checkedKeys = []
            context.emit('close',params)
        }

        // 点击取消按钮
        const cancelModal = () => {
            console.log(3333333, state.checkedKeys)
            state.checkedKeys = []
            context.emit('close', 'cancel')
        }
        return {
            ...toRefs(state),
            formData,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal
        }
    }
})
</script>

<style scoped>

</style>